<template>

  <div class="cards">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>部门信息</span>
        </div>
      </template>

      <div class="first">
        <div class="information">
          <el-form ref="ruleFormRef" label-width="200px" :rules="rules" :model="ruleForm" class="demo-ruleForm">
            <el-form-item class="required" label="部门名称:" prop="deptName">
              <el-input v-model="ruleForm.deptName" type="text"></el-input>
            </el-form-item>
            <el-form-item class="required" label="负责人员工编号:" prop="deptLeader">
              <el-input v-model="ruleForm.deptLeader" type="text"></el-input>
            </el-form-item>
            <el-form-item class="xrequired" label="部门编制:" prop="allPeople">
              <el-input v-model="ruleForm.allPeople" type="number"></el-input>
            </el-form-item>

            <el-form-item class="xrequired" label="上级部门:" prop="deptSuper">

              <el-select class="xrequired" v-model="ruleForm.deptSuper" placeholder="---请选择---">
                <el-option v-for="dept in DeptList" :key="dept.deptId" :label="dept.deptName" :value="dept.deptId" />
              </el-select>

            </el-form-item>


            <el-form-item>
              <el-button type="primary" @click="() => addDeptfn(ruleForm)">
                提交
              </el-button>
              <el-button @click="resetForm(ruleFormRef)">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-card>
  </div>

</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import { ElForm } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus'
import type { DeptAdd } from '@/model';
import { addDept } from '@/api/dept'
import type { DeptList } from '@/model'
import { getDeptListInfo } from '@/api/dept'
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref({
  deptName: '',
  deptLeader: null,
  allPeople: null,
  deptSuper: null
})
const addDeptfn = async (formData: DeptAdd) => {
  if (ruleForm.value.deptName && ruleForm.value.deptLeader && ruleForm.value.allPeople && ruleForm.value.deptSuper) {
    const res = await addDept(formData)
    console.log(res)

  }
  else {
    ElMessage.error('请填写完整信息')
  }
}

const DeptList = ref<DeptList[]>([])
const getDeptList = async () => {
  const res = await getDeptListInfo()
  DeptList.value = res.data
  console.log(DeptList.value)
}
getDeptList()
console.log(DeptList.value)



const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const rules = reactive<FormRules<DeptAdd>>({
  deptName: [
    { required: true },

  ],
  deptLeader: [
    { required: true },

  ],
  allPeople: [
    { required: true },

  ],
  deptSuper: [
    { required: true },

  ],


})

</script>
<style scoped>
.cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.el-card {
  width: 100%;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-form-item {
  display: flex;


}

.required .el-form-item__label::before {
  content: '*';
  color: red;
  margin-right: 0px;
  /* 控制星号与标签文本之间的间距 */
}
</style>
